<template lang="pug">
.menu-list
  .menu-list-left
    queryList(@nodeClick="nodeClick")
  .menu-list-right
    rightStatistics
</template>

<script setup lang="ts">
import reportForm from "./components/report-form.vue";
import queryList from "./components/query-list.vue";
import bacteria from "./components/bacteria.vue";
import applyProject from "./components/applyProject.vue";
import signstatistics from "./components/signstatistics.vue";
import antibiotic from "./components/antibiotic.vue";
import criticalValue from "./components/criticalValue.vue";
import outcontrolOrder from "./components/outcontrolOrder.vue";
import qualityReport from "./components/qualityReport.vue";
import inspectionProject from "./components/inspectionProject.vue";
import workloadStatistics from "./components/workloadStatistics.vue";
import workloadStatisticsGroup from "./components/workloadStatisticsGroup.vue";
import workloadStatisticsPerson from "./components/workloadStatisticsPerson.vue";
const rightStatistics = ref(reportForm);
const nodeClick = (value: string) => {
  switch (value) {
    case "1":
      rightStatistics.value = reportForm;
      break;
    case "2":
      rightStatistics.value = bacteria;
      break;
    case "3":
      rightStatistics.value = applyProject;
      break;
    case "4":
      rightStatistics.value = signstatistics;
      break;
    case "5":
      rightStatistics.value = antibiotic;
      break;
    case "6":
      rightStatistics.value = outcontrolOrder;
      break;
    case "7":
      rightStatistics.value = criticalValue;
      break;
    case "8":
      rightStatistics.value = qualityReport;
      break;
    case "9":
      rightStatistics.value = inspectionProject;
      break;
    case "10":
      rightStatistics.value = workloadStatistics;
      break;
    case "11":
      rightStatistics.value = workloadStatisticsGroup;
      break;
    case "12":
      rightStatistics.value = workloadStatisticsPerson;
      break;
  }
};
</script>

<style lang="less" scoped>
.menu-list {
  display: flex;
  width: 100%;
  height: 100%;

  &-left {
    width: 300px;
    flex-shrink: 0;
    border: 1px #606266;
  }

  &-right {
    flex: 1;
    margin-left: var(--mt-margin);
    max-width: calc(100% - 300px);
  }
}
</style>
